<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title>{{meta_title}}</title>

    <meta name="HandheldFriendly" content="True">
    <meta name="MobileOptimized" content="320">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <meta name="description" content="{{meta_description}}">

    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="{{meta_title}}">
    <meta name="twitter:description" content="{{meta_description}}">

    <meta property="og:url" content="{{@blog.url}}">
    <meta property="og:type" content="article">
    <meta property="og:title" content="{{meta_title}}">  
    <meta property="og:description" content="{{meta_description}}">
    <meta property="og:site_name" content="{{@blog.title}}">

    <meta itemprop="name" content="{{meta_title}}">
    <meta itemprop="description" content="{{meta_description}}">

    {{> custom/meta this}}

    <link href="/favicon.ico" rel="shortcut icon" type="image/x-icon">
    <link href="/apple-touch-icon-precomposed.png" rel="apple-touch-icon">

    <link href="//fonts.googleapis.com/" rel="dns-prefetch">
    <link href="//fonts.googleapis.com/css?family=Noto+Serif:400,700,400italic|Open+Sans:700,400&subset=latin,latin-ext" rel="stylesheet">

    <link rel="stylesheet" href="{{asset 'css/main.min.css'}}"/>

    <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script type="text/javascript">
      {{> custom/config}}

      // Pace Options
      // ==============
      window.paceOptions = {
        catchupTime: 100,
        minTime: 100,
        elements: false,
        restartOnRequestAfter: 500,
        startOnPageLoad: false
      }

      // Ghostium Globals
      // ==============
      window.GHOSTIUM = {};
      GHOSTIUM.haveGA = typeof ga_ua !== 'undefined' && ga_ua !== 'UA-XXXXX-X';
      GHOSTIUM.haveDisqus = typeof disqus_shortname !== 'undefined' && disqus_shortname !== 'example';
      GHOSTIUM.enablePjax = typeof enable_pjax !== 'undefined' ? enable_pjax : true;
    </script>

    <script src="{{asset 'js/head-scripts.min.js'}}"></script>

    {{ghost_head}}
  </head>
  <body class="{{body_class}}">

    {{> drawer this}}

    <div class="drawer-overlay"></div>
    <main id="container" role="main" class="container">
      <div class="surface">
        <div class="surface-container">
          <div data-pjax-container class="content">
            {{{body}}}
          </div>
        </div>
      </div>
    </main>

    {{ghost_foot}}

    <script src="{{asset 'js/foot-scripts.min.js'}}"></script>

    <script type="text/javascript">

      if(GHOSTIUM.haveGA) {
        (function(g,h,o,s,t,z){g.GoogleAnalyticsObject=s;g[s]||(g[s]=
        function(){(g[s].q=g[s].q||[]).push(arguments)});g[s].s=+new Date;
        t=h.createElement(o);z=h.getElementsByTagName(o)[0];
        t.src='//www.google-analytics.com/analytics.js';
        z.parentNode.insertBefore(t,z)}(window,document,'script','ga'));
        ga('create',ga_ua);ga('send','pageview');
      }

      if(GHOSTIUM.haveDisqus) {
        (function () {
        var s = document.createElement('script'); s.async = true;
        s.type = 'text/javascript';
        s.src = '//' + disqus_shortname + '.disqus.com/count.js';
        (document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
        }());
      }
    </script>
  </body>
</html>
